import React, { useMemo, useState } from 'react';
import { FieldProps } from '@rjsf/utils';
import { Flex, Select } from 'antd';
import { isObject } from 'lodash';
/**
 * "testCom": {
      "type": "object",
      "title": "测试",
      "properties": {
        "select1": {
          "type": "string",
          "default": "Velocity"
        },
        "select2": {
          "type": "string",
          "default": "x"
        }
      },
      "fieldNames": {
        "value": "name",
        "label": "name",
        "children": "Variable",
        "key1": "select1",
        "key2": "select2"
      },
      "enum": [
        {
          "name": "Density"
        },
        {
          "name": "Pressure"
        },
        {
          "Variable": ["x", "z", "y"],
          "name": "Velocity"
        }
      ]
    }
    "testCom": {
      "ui:field": "relatedSelect"
    }
 * */
export const RelatedSelect = ({
  schema,
  formData,
  onChange,
}: FieldProps<object>) => {
  const option = schema?.enum || schema?.oneOf || [];
  const fieldNames = schema?.fieldNames || {};
  const handleSelectChange = (val: string, key: string) => {
    formData[key] = val;
    onChange({ ...formData });
    setSelect1(formData?.[fieldNames.key1]);
    setSelect2(formData?.[fieldNames.key2]);
  };
  const [select1, setSelect1] = useState(formData?.[fieldNames.key1]);
  const [select2, setSelect2] = useState(formData?.[fieldNames.key2]);
  const optionChild = useMemo(() => {
    const temp =
      option
        .find((o) => o[fieldNames.value] === select1)
        ?.[fieldNames.children]?.map((item) => {
          if (isObject(item)) {
            return {
              value: item[fieldNames.value],
              label: item[fieldNames.label],
            };
          } else {
            return {
              value: item,
              label: item,
            };
          }
        }) || null;
    if (!temp?.length) {
      setSelect2('');
      onChange({ ...formData, [fieldNames.key2]: '' });
    }
    return temp;
  }, [select1]);
  return (
    <Flex
      style={{ gap: 4 }}
      className='items-center'>
      <Flex
        style={{ flex: 1, gap: 10 }}
        className='items-center'>
        <span
          style={{ flex: 1 }}
          className='fs'>
          {schema.title}
        </span>
      </Flex>
      <Flex
        style={{
          width: 0,
          flex: 1,
          gap: 5,
          overflow: 'hidden',
          fontSize: 12,
        }}>
        <Select
          style={{ width: '50%' }}
          styles={{ popup: { root: { borderRadius: '4px' } } }}
          value={select1}
          onChange={(value) => handleSelectChange(value, fieldNames?.key1)}
          options={option.map((o) => ({
            value: o[fieldNames?.value],
            label: o[fieldNames?.label],
          }))}
        />
        <Select
          style={{ width: '50%' }}
          styles={{ popup: { root: { borderRadius: '4px' } } }}
          value={select2}
          onChange={(value) => handleSelectChange(value, fieldNames?.key2)}
          options={optionChild}
        />
      </Flex>
    </Flex>
  );
};
